<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">
        <p>{{title}}</p>
        <p>{{content}}</p>
        <p>{{1+2+3}}</p>
        <p>{{1>2?'对':'错'}}</p>
        <p>{{output()}}</p>
        <p>{{output()}}</p>
        <p>{{outputContent}}</p>
        <p>{{outputContent}}</p>
         
    </div>

    <!-- 引入本地的Vue -->
    <script src="./vue.js"></script>
    <script>
        // let value='这是内容a'
        // // 编写Dom操作
        // document.getElementById('box').textContent=value;
        // value = '新内容' // 编写Dom操作
        // document.getElementById('box').textContent=value;
        
        // Vue会简化DOM操作。

       const vm = new Vue({
        // 1,响应式数据与插值表达式。
        // 所谓的响应式数据指的是：我们在Vue内部对响应式数据进行操作，它就会自动地更新到视图中(界面中)。就可以省去大量的DOM操作了。

        // 可以直接通过Vue实例访问data。
        el:"#box",
        data() {
          return {
            title:"标题1",
            content:"内容1"
        
          }
        },
        methods: {
            // output:function(){},
            output(){
                console.log('method执行了')
                return '标题为'+this.title+', '+'内容为'+this.content;
            }
        
        },
        //2.计算属性  书写的时候可以为1个函数。  
        //  具有缓存性。优化性能。
        // 注意：不能加括号因为它叫计算属性。
        computed:{
        outputContent(){
            console.log('computed执行了')
            return '标题为2'+this.title+', '+'内容为'+this.content;
        },
        },
                // 也就意味着当你改数据的时候,他会自动触发一个叫做修改页面内容的一个操作啊
        //3.侦听器,它就是监听你某个数据有没有变化
        //有可能你希望在某个数据变化的时候并不仅仅是更新页面，同时改点别的。
//例如侦听title的变化，title要作为一个方法名设置在侦听器的内部。然后这里边接受两个值，一个是新值一个是旧值。

        watch:{ //注意：你侦听的数据必须是响应式的。
            title(newValue, oldValue){
                console.log(newValue, oldValue);
            }


        }

       });

    </script>
  </body>
</html>
